
<template>
  <t-layout class="main-layout">
    <t-header class="main-layout-header">
      <div class="logo-title">
        <img src="../assets/index_top_logo.png" alt="logo" style="width: 30px;height: 30px;margin-right: 10px;">
        <div style="color: #3894FF">蓝蚁智控</div>
      </div>
    </t-header>

    <t-content>
      <t-card :bordered="false" style="width: 1400px;margin: auto;margin-top: 20px;border-radius: 20px">
        <div class="index_main">
            <div class="index_top" style="margin-bottom: 30px">
               <div class="index_top_left">
                 <t-space direction="vertical" size="100">
                   <h2>蓝蚁智控  : ) </h2>
                   <h2>让内容生产变成自动流水线</h2>
                   <p style="margin-top: 20px;font-size: 18px;">蓝蚁= ①内容运营+①摄影+①剪辑+①账号运营</p>
                   <p style="margin-top: 20px"><t-button style="background: linear-gradient(117.84deg, rgba(89,193,247,1) -0.66%,rgba(140,44,190,1) 80.94%);color: #fff;border-radius: 14px" variant="outline" size="large" @click="toMain()">快速开始</t-button></p>
                 </t-space>
               </div>
               <div>
                 <img style="width: 245px;margin: auto; border-radius: 19px;margin-bottom: 10px;margin-right: 30px" src="../assets/index_logo.png" alt="" />
               </div>
            </div>
          <div class="index_body">
            <div class="news_card"  @click="toTaign(item.url)" v-for="item in newlist" :key="item.id">
              <div class="news_div">
                <div style="margin-right: 14px;">
                  <h2>{{item.title}}</h2>
                  <p>{{item.content}}</p>
                </div>
                <div v-if="item.img">
                  <img :src="item.img" alt="" />
                </div>

              </div>

            </div>
          </div>
        </div>
      </t-card>
    </t-content>
  </t-layout>
</template>


<script setup >
document.documentElement.removeAttribute('theme-mode');
import { ref } from 'vue';
import {get,post} from "@/utils/api";
import config from "@/config";
import { MessagePlugin } from 'tdesign-vue-next';
import router from "@/router";
import { useRoute } from 'vue-router'

//从路由上获取参数
// 在 setup 中获取路由对象
const route = useRoute()

// 获取 code 参数值
const codeValue = route.query.code // 输出: "454545"
console.log(codeValue)
localStorage.setItem('register_code', codeValue);
const newlist = ref([]);
const toMain = () => {
  let token = localStorage.getItem('authToken');
  if(!token){
    MessagePlugin.error('请先登录');
    router.push("/login");
  }else{
    router.push("/dataShow");
  }

}
const getArticle = () => {
  get(config.getArticle,{}).then(res=>{
    console.log("getArticle", res.data.data)
    newlist.value = res.data.data
  })
}
getArticle()

const toTaign = (url) => {
  if(!url){
    toMain()
  }else{
    window.open(url)
  }

}

</script>
<style scoped>
  .main-layout{
    background: linear-gradient(180deg, rgba(206,224,251,1) 0%,rgba(255,255,255,0) 99%);
  }
  .main-layout-header{
    background: none;
  }
  .index_main{
    padding: 10px 30px;

  }
  .index_top{
    display: flex;
    justify-content: space-between;
  }
  .index_top_left h2{
    font-size: 36px;
    height: 66px;
    line-height: 66px;
  }
  .index_body{
    display: grid;
    gap: 16px;
    height: calc(100vh - 340px); /* 根据实际布局调整数值 */
    padding: 10px;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .index_body::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .t-content {
    flex: 1;
    min-height: 0; /* 修复flex布局滚动问题 */
  }
  .news_card{
    border-radius: 10px;
    /* background-color: #2e2d2d;
     color: rgba(255, 255, 255, 1);*/
     font-size: 16px;
     box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
     padding: 20px;
     transition: all 0.3s ease; /* 添加过渡动画 */
    cursor: pointer; /* 设置手型光标 */

    /* 提升悬停层级 */
    position: relative;
    z-index: 1;
    transform: translateZ(0); /* 启用GPU加速 */
    backface-visibility: hidden; /* 隐藏背面 */
    -webkit-font-smoothing: subpixel-antialiased; /* 优化字体渲染 */
  }
  .news_card:hover {
    transform: scale(1.02) translateZ(0);/* 悬停时放大 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), /* 加强阴影效果 */
    0 4px 6px -4px rgba(0, 0, 0, 0.3);
    z-index: 2; /* 提升层级避免被遮挡 */
  }

  /* 可选：添加点击反馈 */
  .news_card:active {
    transform: scale(0.98);
  }

  .news_div{
    display: flex;
    justify-content: space-between;
    line-height: 1.8;
  }
  .news_div h2{
    font-size: 18px;
  }
  .news_div p{
    font-size: 14px;
    /*color: rgba(174,174,174,1);*/
    white-space: pre-line; /* 保留换行符并允许自动换行 */
  }
  .logo-title {
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    display: flex;
    width: 1400px;
    margin: auto;
    padding: 20px;
  }

</style>
